import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_hex_color/flutter_hex_color.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:signage/l10n/l10n.dart';
import 'package:signage/widgets/custom_appbar.dart';
import 'package:signage/widgets/device_list_item.dart';
import 'package:signage/widgets/edit_dialog.dart';

import '../controllers/cast_controller.dart';

class CastView extends GetView<CastController> {
  const CastView({super.key});

  Widget buildAddListButton() {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
    decoration: BoxDecoration(
      color: HexColor('#FFF8DA'), // 浅黄色背景
      borderRadius: BorderRadius.circular(20.r),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 用户图标
        Container(
          width: 20.w,
          height: 20.w,
          child: Image.asset(
            'assets/images/user_add_icon.png', // 请确保添加对应的图标资源
            fit: BoxFit.contain,
          ),
        ),
        SizedBox(width: 4.w),
        // 文字
        Text(
          AppLocalizations.of(Get.context!)!.translate('add_list'),  // "添加名单"
          style: TextStyle(
            fontSize: 14.sp,
            color: HexColor('#333333'),
            fontWeight: FontWeight.normal,
          ),
        ),
      ],
    ),
  );
}

  @override
  Widget build(BuildContext context) {
    final logic = Get.put(CastController());
    return Obx(() {
      return Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
          children: [
            // 背景图
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Image.asset(
                'assets/images/title_bar_bg.png',
                width: Get.width,
                height: 200.h,
                fit: BoxFit.cover,
              ),
            ),

            // 内容区域
            Column(
              children: [
                // 标题部分
                Padding(
                  padding: EdgeInsets.fromLTRB(16.w, 40.h, 16.w, 16.h),
                  child: Row(
                    children: [
                      Container(
                        width: 340.w, // 设置合适的宽度
                        height: 48.h, // 设置合适的高度
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(24.r),
                        ),
                        child: TextField(
                          controller: logic.meetingTitleController,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 16.sp,
                            color: Colors.black87,
                          ),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(
                              horizontal: 16.w,
                              vertical: 8.h,
                            ),
                            border: InputBorder.none,
                            hintText: AppLocalizations.of(context)!.translate('enter_meeting_title'),
                            hintStyle: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 16.sp,
                            ),
                          ),
                          onChanged: (value) {
                            logic.meetingTitle.value = value;
                          },
                        ),
                      ),
                    ],
                  ),
                ),

                // 滚动内容区域
                Expanded(
                  child: SingleChildScrollView(
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 模板选择部分 - 移除外层的白色背景
                          Container(
                            padding: EdgeInsets.all(16.w),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(12.r),
                            ),
                            child: Column(
                              children: [
                                Row(
                                  children: [
                                    Container(
                                      width: 6.w,
                                      height: 15.w,
                                      decoration: BoxDecoration(
                                        color: Color(0xFFFDC003),
                                        borderRadius:
                                            BorderRadius.circular(27.r),
                                      ),
                                      margin: EdgeInsets.only(
                                          left: 0.w, right: 5.w),
                                    ),
                                    Text(
                                      AppLocalizations.of(context)!.translate('select_template'),
                                      style: TextStyle(
                                          color: HexColor('#333333'),
                                          fontSize: 16.w,
                                          fontWeight: FontWeight.normal),
                                    ),
                                    SizedBox(width: 3.5.w),
                                    // Image.asset(
                                    //   'assets/images/VectorQuestion.png',
                                    //   width: 13.5.w,
                                    //   height: 13.5.w,
                                    //   fit: BoxFit.contain,
                                    // ),
                                  ],
                                ),
                                SizedBox(
                                  height: 10.w,
                                ),
                                Container(
                                  height: 36.h,
                                  decoration: BoxDecoration(
                                    color: Colors.grey[100],
                                    borderRadius: BorderRadius.circular(18.r),
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: GestureDetector(
                                          onTap: () => logic.touchSample(0),
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color:
                                                  logic.sampleValue.value == 0
                                                      ? Colors.white
                                                      : Colors.transparent,
                                              border:
                                                  logic.sampleValue.value == 0
                                                      ? Border.all(
                                                          color: Colors.amber,
                                                          width: 1)
                                                      : null,
                                              borderRadius:
                                                  BorderRadius.circular(18.r),
                                              boxShadow: logic
                                                          .sampleValue.value ==
                                                      0
                                                  ? [
                                                      BoxShadow(
                                                        color: Colors.black
                                                            .withOpacity(0.1),
                                                        blurRadius: 4,
                                                        offset: Offset(0, 2),
                                                      )
                                                    ]
                                                  : null,
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              AppLocalizations.of(context)!.translate('same_ab_sides'),
                                              style: TextStyle(
                                                fontSize: 13.w,
                                                color:
                                                    logic.sampleValue.value == 0
                                                        ? HexColor('#333333')
                                                        : HexColor('#999999'),
                                                fontWeight:
                                                    logic.sampleValue.value == 0
                                                        ? FontWeight.w600
                                                        : FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: GestureDetector(
                                          onTap: () => logic.touchSample(1),
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color:
                                                  logic.sampleValue.value == 1
                                                      ? Colors.white
                                                      : Colors.transparent,
                                              border:
                                                  logic.sampleValue.value == 1
                                                      ? Border.all(
                                                          color: Colors.amber,
                                                          width: 1)
                                                      : null,
                                              borderRadius:
                                                  BorderRadius.circular(18.r),
                                              boxShadow: logic
                                                          .sampleValue.value ==
                                                      1
                                                  ? [
                                                      BoxShadow(
                                                        color: Colors.black
                                                            .withOpacity(0.1),
                                                        blurRadius: 4,
                                                        offset: Offset(0, 2),
                                                      )
                                                    ]
                                                  : null,
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              AppLocalizations.of(context)!.translate('different_ab_sides'),
                                              style: TextStyle(
                                                fontSize: 13.w,
                                                color:
                                                    logic.sampleValue.value == 1
                                                        ? HexColor('#333333')
                                                        : HexColor('#999999'),
                                                fontWeight:
                                                    logic.sampleValue.value == 1
                                                        ? FontWeight.w600
                                                        : FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: GestureDetector(
                                          onTap: () => logic.touchSample(2),
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color:
                                                  logic.sampleValue.value == 2
                                                      ? Colors.white
                                                      : Colors.transparent,
                                              border:
                                                  logic.sampleValue.value == 2
                                                      ? Border.all(
                                                          color: Colors.amber,
                                                          width: 1)
                                                      : null,
                                              borderRadius:
                                                  BorderRadius.circular(18.r),
                                              boxShadow: logic
                                                          .sampleValue.value ==
                                                      2
                                                  ? [
                                                      BoxShadow(
                                                        color: Colors.black
                                                            .withOpacity(0.1),
                                                        blurRadius: 4,
                                                        offset: Offset(0, 2),
                                                      )
                                                    ]
                                                  : null,
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              AppLocalizations.of(context)!.translate('only_a_side'),
                                              style: TextStyle(
                                                fontSize: 13.w,
                                                color:
                                                    logic.sampleValue.value == 2
                                                        ? HexColor('#333333')
                                                        : HexColor('#999999'),
                                                fontWeight:
                                                    logic.sampleValue.value == 2
                                                        ? FontWeight.w600
                                                        : FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: GestureDetector(
                                          onTap: () => logic.touchSample(3),
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color:
                                                  logic.sampleValue.value == 3
                                                      ? Colors.white
                                                      : Colors.transparent,
                                              border:
                                                  logic.sampleValue.value == 3
                                                      ? Border.all(
                                                          color: Colors.amber,
                                                          width: 1)
                                                      : null,
                                              borderRadius:
                                                  BorderRadius.circular(18.r),
                                              boxShadow: logic
                                                          .sampleValue.value ==
                                                      3
                                                  ? [
                                                      BoxShadow(
                                                        color: Colors.black
                                                            .withOpacity(0.1),
                                                        blurRadius: 4,
                                                        offset: Offset(0, 2),
                                                      )
                                                    ]
                                                  : null,
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              AppLocalizations.of(context)!.translate('only_b_side'),
                                              style: TextStyle(
                                                fontSize: 13.w,
                                                color:
                                                    logic.sampleValue.value == 3
                                                        ? HexColor('#333333')
                                                        : HexColor('#999999'),
                                                fontWeight:
                                                    logic.sampleValue.value == 3
                                                        ? FontWeight.w600
                                                        : FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                SizedBox(
                                  height: 10.w,
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    // A面模板预览
                                    if (logic.sampleValue.value != 3)
                                      Obx(() => GestureDetector(
                                            onTap: () =>
                                                logic.selectTemplateA(),
                                            child: logic.templateModelA.value
                                                        ?.filePath !=
                                                    null
                                                ? Container(
                                                    width: 140.w,
                                                    height: 84.w,
                                                    margin:
                                                        EdgeInsets.symmetric(
                                                            horizontal: 4.w),
                                                    decoration: BoxDecoration(
                                                      color: Colors.grey[200],
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              8.r),
                                                      image: logic
                                                                  .templateModelA
                                                                  .value
                                                                  ?.filePath !=
                                                              null
                                                          ? DecorationImage(
                                                              image: logic
                                                                      .templateModelA
                                                                      .value!
                                                                      .filePath
                                                                      .startsWith(
                                                                          'assets/')
                                                                  ? AssetImage(logic
                                                                      .templateModelA
                                                                      .value!
                                                                      .filePath)
                                                                  : FileImage(File(logic
                                                                          .templateModelA
                                                                          .value!
                                                                          .filePath))
                                                                      as ImageProvider,
                                                              fit: BoxFit.fitWidth,
                                                            )
                                                          : null,
                                                    ),
                                                  )
                                                : Container(
                                                    width: 150.w,
                                                    height: 100.w,
                                                    decoration: BoxDecoration(
                                                      color: HexColor('#F5F5F5'),
                                                      borderRadius: BorderRadius.circular(8.r),
                                                    ),
                                                    child: Column(
                                                      mainAxisAlignment: MainAxisAlignment.center,
                                                      children: [
                                                        Image.asset('assets/images/Group 1321318540@3x.png',width: 24.w,height: 24.w,),
                                                        SizedBox(height: 8.h),
                                                        Text(
                                                          AppLocalizations.of(context)!.translate('add_template'),
                                                          style: TextStyle(
                                                            fontSize: 13.sp,
                                                            color: HexColor('#999999'),
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                          )),

                                    // B面模板预览
                                    if (logic.sampleValue.value != 2)
                                      Obx(() => GestureDetector(
                                            onTap: () =>
                                                logic.selectTemplateB(),
                                            child: logic.templateModelB.value
                                                        ?.filePath !=
                                                    null
                                                ? Container(
                                                    width: 140.w,
                                                    height: 84.w,
                                                    margin:
                                                        EdgeInsets.symmetric(
                                                            horizontal: 4.w),
                                                    decoration: BoxDecoration(
                                                      color: Colors.grey[200],
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              8.r),
                                                      image: logic
                                                                  .templateModelB
                                                                  .value
                                                                  ?.filePath !=
                                                              null
                                                          ? DecorationImage(
                                                              image: logic
                                                                      .templateModelB
                                                                      .value!
                                                                      .filePath
                                                                      .startsWith(
                                                                          'assets/')
                                                                  ? AssetImage(logic
                                                                      .templateModelB
                                                                      .value!
                                                                      .filePath)
                                                                  : FileImage(File(logic
                                                                          .templateModelB
                                                                          .value!
                                                                          .filePath))
                                                                      as ImageProvider,
                                                              fit: BoxFit.fitWidth,
                                                            )
                                                          : null,
                                                    ),
                                                  )
                                                : Container(
                                                    width: 150.w,
                                                    height: 100.w,
                                                    decoration: BoxDecoration(
                                                      color: HexColor('#F5F5F5'),
                                                      borderRadius: BorderRadius.circular(8.r),
                                                    ),
                                                    child: Column(
                                                      mainAxisAlignment: MainAxisAlignment.center,
                                                      children: [
                                                        Image.asset('assets/images/Group 1321318540@3x.png',width: 24.w,height: 24.w,),
                                                        SizedBox(height: 8.h),
                                                        Text(
                                                          AppLocalizations.of(context)!.translate('add_template'),
                                                          style: TextStyle(
                                                            fontSize: 13.sp,
                                                            color: HexColor('#999999'),
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                          )),
                                  ],
                                ),
                                SizedBox(height: 10.w),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    if (logic.sampleValue.value != 3)
                                      SizedBox(width: 10.w),
                                    Container(
                                        width: 140.w,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(AppLocalizations.of(context)!.translate('side_a'),
                                                style: TextStyle(
                                                    fontSize: 13.w,
                                                    color: HexColor('#333333'),
                                                    fontWeight: FontWeight.bold)),
                                          ],
                                        )),
                                    if (logic.sampleValue.value != 2)
                                      SizedBox(width: 20.w),
                                    Container(
                                        width: 140.w,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(AppLocalizations.of(context)!.translate('side_b'),
                                                style: TextStyle(
                                                    fontSize: 13.w,
                                                    color: HexColor('#333333'),
                                                    fontWeight: FontWeight.bold)),
                                          ],
                                        )),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 15.w),
                          Container(
                            padding: EdgeInsets.all(16.w),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(12.r),
                            ),
                            child: Column(
                              children: [
                                Row(
                                  children: [
                                    Container(
                                      width: 6.w,
                                      height: 15.w,
                                      decoration: BoxDecoration(
                                        color: Color(0xFFFDC003),
                                        borderRadius:
                                            BorderRadius.circular(27.r),
                                      ),
                                      margin: EdgeInsets.only(
                                          left: 0.w, right: 5.w),
                                    ),
                                    Text(
                                      AppLocalizations.of(context)!.translate('cast_select_list'),
                                      style: TextStyle(
                                          color: HexColor('#333333'),
                                          fontSize: 16.w,
                                          fontWeight: FontWeight.normal),
                                    ),
                                  ],
                                ),
                                SizedBox(
                                  height: 10.w,
                                ),
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(10.0),
                                  child: Container(
                                      color: Colors.white,
                                      padding: EdgeInsets.only(
                                          left: 10.w,
                                          right: 10.w,
                                          top: 5.w,
                                          bottom: 5.w),
                                      child: InkWell(
                                        onTap: () => logic.touchChooseList(),
                                        child: Row(
                                          mainAxisAlignment: logic
                                                  .selectedMembers.isEmpty
                                              ? MainAxisAlignment.center
                                              : MainAxisAlignment.spaceBetween,
                                          children: [
                                            Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                Obx(() => logic
                                                        .selectedMembers.isEmpty
                                                    ? buildAddListButton()
                                                    : Row(
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .end,
                                                        children: [
                                                          Text(
                                                              "${logic.selectedGroupName}",
                                                              style: TextStyle(
                                                                  fontSize:
                                                                      13.w,
                                                                  color: HexColor(
                                                                      '#333333'),
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .normal)),
                                                          SizedBox(width: 10.w),
                                                          Image.asset(
                                                            'assets/images/home_list_icon_members@2x.png',
                                                            width: 17.5.w,
                                                            height: 17.5.w,
                                                            fit: BoxFit.contain,
                                                          ),
                                                          Text(
                                                              "${logic.selectedMembers.length}",
                                                              style: TextStyle(
                                                                  fontSize:
                                                                      13.w,
                                                                  color: HexColor(
                                                                      '#333333'),
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .normal))
                                                        ],
                                                      )),
                                              ],
                                            ),
                                            Obx(() => logic
                                                    .selectedMembers.isEmpty
                                                ? SizedBox()
                                                : Row(
                                                    children: [
                                                      TextButton(
                                                          style: TextButton
                                                              .styleFrom(
                                                            minimumSize:
                                                                Size.zero,
                                                            padding: EdgeInsets
                                                                .symmetric(
                                                                    horizontal:
                                                                        8.w),
                                                          ),
                                                          onPressed: () => logic
                                                              .viewMembers(),
                                                          child: Image.asset(
                                                            'assets/images/home_list_icon_view@2x.png',
                                                            width: 17.5.w,
                                                            height: 17.5.w,
                                                            fit: BoxFit.contain,
                                                          )),
                                                      TextButton(
                                                        style: TextButton
                                                            .styleFrom(
                                                          minimumSize:
                                                              Size.zero,
                                                          padding: EdgeInsets
                                                              .symmetric(
                                                                  horizontal:
                                                                      8.w),
                                                        ),
                                                        onPressed: () =>
                                                            logic.editMembers(),
                                                        child: Image.asset(
                                                          'assets/images/home_list_icon_edit@2x.png',
                                                          width: 17.5.w,
                                                          height: 17.5.w,
                                                          fit: BoxFit.contain,
                                                        ),
                                                      ),
                                                    ],
                                                  )),
                                          ],
                                        ),
                                      )),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 15.w),
                          Container(
                            padding: EdgeInsets.all(16.w),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(12.r),
                            ),
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Row(
                                      children: [
                                        Container(
                                          width: 6.w,
                                          height: 15.w,
                                          decoration: BoxDecoration(
                                            color: Color(0xFFFDC003),
                                            borderRadius:
                                                BorderRadius.circular(27.r),
                                          ),
                                          margin: EdgeInsets.only(
                                              left: 0.w, right: 5.w),
                                        ),
                                        Text(
                                          AppLocalizations.of(context)!.translate('select_device'),
                                          style: TextStyle(
                                              color: HexColor('#333333'),
                                              fontSize: 16.w,
                                              fontWeight: FontWeight.normal),
                                        ),
                                      ],
                                    ),
                                    Obx(() => logic.selectedDevices.isEmpty
                                        ? SizedBox()
                                        : GestureDetector(
                                            onTap: () => logic.selectDevice(),
                                            child: Container(
                                              padding: EdgeInsets.symmetric(
                                                horizontal: 16.w,
                                                vertical: 8.h,
                                              ),
                                              decoration: BoxDecoration(
                                                color: HexColor('#FFF8DA'),
                                                borderRadius: BorderRadius.circular(20.r),
                                              ),
                                              child: Row(
                                                mainAxisSize: MainAxisSize.min,
                                                children: [
                                                  Image.asset(
                                                    'assets/images/Group 1321318510@2x.png',
                                                    width: 14.w,
                                                    height: 14.w,
                                                    fit: BoxFit.contain,
                                                  ),
                                                  SizedBox(width: 4.w),
                                                  Text(
                                                    AppLocalizations.of(context)!.translate('device_add_dialog_title'),
                                                    style: TextStyle(
                                                      fontSize: 13.sp,
                                                      color: HexColor('#333333'),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          )),
                                  ],
                                ),
                                SizedBox(height: 10.w),
                                Obx(() => logic.selectedDevices.isEmpty
                                    ? Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                                        children: [
                                          Container(
                                            padding: EdgeInsets.symmetric(
                                                horizontal: 16.w,
                                                vertical: 8.w),
                                            decoration: BoxDecoration(
                                              color: HexColor('#FFF8DA'),
                                              borderRadius:
                                                  BorderRadius.circular(36.r),
                                            ),
                                            child: TextButton(
                                              style: TextButton.styleFrom(
                                                  minimumSize: Size.zero,
                                                  padding: EdgeInsets.zero,
                                                  tapTargetSize:
                                                      MaterialTapTargetSize
                                                          .shrinkWrap),
                                              onPressed: () =>
                                                  logic.selectDevice(),
                                              child: Row(
                                                children: [
                                                  Image.asset(
                                                    'assets/images/Group 1321318758.png',
                                                    width: 14.w,
                                                    height: 14.w,
                                                    fit: BoxFit.contain,
                                                  ),
                                                  SizedBox(width: 5.w),
                                                  Text(
                                                    AppLocalizations.of(context)!.translate('blue'),
                                                    style: TextStyle(
                                                      fontSize: 15.sp,
                                                      fontWeight: FontWeight.w400,
                                                      letterSpacing: 0,
                                                      color: Color.fromRGBO(51, 51, 51, 1),
                                                    ),
                                                  )
                                                ],
                                              ),
                                            ),
                                          ),
                                          Container(
                                            padding: EdgeInsets.symmetric(
                                                horizontal: 10.w,
                                                vertical: 5.w),
                                            decoration: BoxDecoration(
                                              border: Border.all(
                                                color: Colors.grey,
                                                width: 1.0,
                                              ),
                                              borderRadius:
                                                  BorderRadius.circular(36.r),
                                            ),
                                            child: TextButton(
                                              style: TextButton.styleFrom(
                                                  minimumSize: Size.zero,
                                                  padding: EdgeInsets.zero,
                                                  tapTargetSize:
                                                      MaterialTapTargetSize
                                                          .shrinkWrap),
                                              onPressed: () =>
                                                  logic.selectDeviceByNfc(),
                                              child: Row(
                                                children: [
                                                  Image.asset(
                                                    'assets/images/Group 1321318761.png',
                                                    width: 14.w,
                                                    height: 14.w,
                                                    fit: BoxFit.contain,
                                                  ),
                                                  SizedBox(width: 5.w),
                                                  Text(
                                                    'NFC',
                                                    style: TextStyle(
                                                      fontSize: 15.sp,
                                                      fontWeight: FontWeight.w400,
                                                      letterSpacing: 0,
                                                      color: Color.fromRGBO(51, 51, 51, 1),
                                                    ),
                                                  )
                                                ],
                                              ),
                                            ),
                                          )
                                        ],
                                      )
                                    : Column(
                                        children: [
                                          ...logic.selectedDevices
                                              .map((cachedInfo) {
                                            return Padding(
                                              padding:
                                                  EdgeInsets.only(bottom: 8.w),
                                              child: DeviceListItem(
                                                cachedInfo: cachedInfo,
                                                connectionStateStream: null,
                                                onRemove: (id) {
                                                  logic
                                                      .removeSelectedDevice(id);
                                                },
                                                isView: true,
                                                showDeleteButton: true,
                                              ),
                                            );
                                          }).toList(),
                                        ],
                                      )),
                              ],
                            ),
                          ),
                          SizedBox(height: 15.w),
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  padding:
                      EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.w),
                  color: Colors.white,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          color: HexColor('#F4F4F4'),
                          borderRadius: BorderRadius.circular(20.w),
                        ),
                        width: 90.w,
                        height: 40.w,
                        child: TextButton(
                          style: TextButton.styleFrom(
                              minimumSize: Size(0.w, 0.w),
                              padding: EdgeInsets.zero,
                              tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                          onPressed: () => logic.preview(),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(AppLocalizations.of(context)!.translate('cast_preview'),
                                  style: TextStyle(
                                      fontSize: 13.w,
                                      color: HexColor('#333333'),
                                      fontWeight: FontWeight.normal)),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20.w),
                            color: HexColor('#FCCF01')),
                        width: 240.w,
                        height: 40.w,
                        child: TextButton(
                          style: TextButton.styleFrom(
                              minimumSize: Size(0.w, 0.w),
                              padding: EdgeInsets.zero,
                              tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                          onPressed: () => logic.startCasting(),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(AppLocalizations.of(context)!.translate('cast'),
                                  style: TextStyle(
                                      fontSize: 13.w,
                                      color: HexColor('#333333'),
                                      fontWeight: FontWeight.normal)),
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ],
        ),
      );
    });
  }
}
